<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table'
import type { scmGoodsData } from '#/views/backend/scmGoods/config'

import { defineEmits, ref } from 'vue'

import { useVbenModal } from '@vben/common-ui'

import { Button, Input, Space } from 'ant-design-vue'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { getProductOrderList } from '#/api/common'

// 定义要发送的事件
type EmitEvents = {
  pushData: {}
}
const emit = defineEmits<EmitEvents>()

const [Modal, modalApi] = useVbenModal({
  appendToMain: true,
  class: 'w-[85%] h-[70%]',
  footer: false,
  onCancel() {
    modalApi.close()
  },
  onConfirm() {},
})

const gridOptions: VxeTableGridOptions<scmGoodsData> = {
  checkboxConfig: {
    highlight: true,
    reserve: true,
    showReserveStatus: true,
  },
  columns: [
    { field: 'goods_code', title: '简码' },
    { field: 'goods_no', title: '货号' },
    { field: 'color_name', title: '货品颜色' },
    { field: 'erp_purchaseid', title: '采购单' },
    { field: 'production_type', title: '生产性质' },
    { field: 'plant', title: '加工厂', width: 150, slots: { default: 'plant' } },
    { field: 'plan_total_num', title: '数量' },
    { field: 'production_date', title: '单据日期' },
    { field: 'production_sn', title: '生产单号' },
    { field: 'expected_completion_date', title: '交货日期' },
    { field: 'remark', title: '备注' },
    { field: 'action', title: '操作', fixed: 'right', width: 100, slots: { default: 'action' } },
  ],

  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        // 2. 调接口
        const res = await getProductOrderList({
          page: page.currentPage,
          limit: page.pageSize,
          quick_search: quick_search.value,
        })

        return { items: res.list, total: res.total }
      },
    },
    sort: true,
  },
  toolbarConfig: {
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
}

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions })

/**
 *  快速查询查询
 */
const quick_search = ref()
function doSearch() {
  gridApi.query()
}

/**
 * 处理推送按钮点击事件
 */
function handlePush(row: any) {
  // 发送数据到父组件，确保总是数组格式
  emit('pushData', row)
  // 关闭模态框
  modalApi.close()
}
</script>

<template>
  <Modal title="生产单列表">
    <Grid>
      <template #toolbar-tools>
        <Input v-model:value="quick_search" allow-clear placeholder="输入货号或品名" style="width: 200px; margin-right: 8px" @change="doSearch" />
      </template>
      <!-- 操作列插槽 -->
      <template #action="{ row }">
        <Space>
          <Button type="primary" class="my-green-btn" size="small" @click="handlePush(row)">选择</Button>
        </Space>
      </template>
      <template #plant="{ row }">
        {{ `${row.follow_order.SupplyCode}${row.follow_order.SupplyNa}` }}
      </template>
    </Grid>
  </Modal>
</template>
<style lang="scss" scoped></style>
